<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>组织架构</title>
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="css/comm.css" />
    <link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="css/headersearch.css" />
    <link rel="stylesheet" type="text/css" href="css/organization.css" />
    <link rel="stylesheet" type="text/css" href="../script/mui/mui.picker.min.css" />
    <link rel="stylesheet" type="text/css" href="../script/mui/mui.reset.css" />
    <link rel="stylesheet" type="text/css" href="../script/vant/index.css" />
    <link rel="stylesheet" type="text/css" href="./css/chooseprojectlist.css" />
    <style>
        .aui-content.headerBox {
            height: auto;
        }

        .organization_list_li_icon img {
            width: 100%;
        }

        .mainbox:first-child {
            margin-top: 0 !important;
        }

        .yuan-bule {
            position: relative;
            display: inline-block;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-radius: 50%;
            background-color: #1abbec;
            color: #fff;
        }

        .yuan-mred {
            background-color: #9833e6;
        }

        .yuan-sblue {
            background-color: #1367d6;
        }

        .yuan-qblue {
            background-color: #1989fa;
        }

        .islast {
            color: #1989fa;
        }
        .maskbg {
    background: rgba(0,0,0,.3);
    z-index: 90;
    position: fixed;
    top: 0px;
    bottom: 0;
    width: 100%;
}

.choose-list {
    position: fixed;
    bottom: 70px;
    left: 0;
    right: 0;
    height: auto;
    background: #fff;
    z-index: 99;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    padding-bottom: 2rem;
    max-height: 400px;
    overflow-y: auto;
}
.choose-header {
    text-align: center;
    padding: 0.5rem 0.6rem 0.6rem 0.6rem;
    position: fixed;
    width: 100%;
    overflow: hidden;
    z-index: 100;
    background: #fff;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}

.pt50 {
    padding-top:50px;
}

.header-close {
    position: absolute;
    right: 0;
    top: 0;
    margin: 0 15px 0 30px;
    line-height: 40px;
    height: 40px;
}
.header-close > i {
    font-size: 18px;
}

.btn-del-show {
    right:0;
    min-width:60px;
}
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div v-on:click="doHideSearch()" v-if="showsearch" class="maskbg">
        </div>
        <div class="aui-content">
            <div id="topheader" class="aui-content headerBox " style="z-index: 89;">
                <!-- 搜索 -->
                <div class="aui-searchbar" id="search">
                    <div class="aui-searchbar-input aui-searchbar-input-white aui-border-radius">
                        <i class="icon iconfont icon-sousuo"></i>
                        <input v-model="form.keywords" type="search" placeholder="姓名搜索" id="search-input">
                        <div class="aui-searchbar-clear-btn">
                            <i class="icon iconfont icon-guanbi"></i>
                        </div>
                    </div>
                    <div class="aui-searchbar-btn" tapmode></div>
                </div>
                <div class="fullName breadcrumb-header border-bottomLine" id="chooseproject"
                    style="padding: 0px 20px 6px; line-height: unset;">
                    <label v-on:click="do_open(item,1)" v-for="(item,index) in headerlist">
                        <label v-bind:class="{'islast':index==(headerlist.length-1)&&index!=0}"
                            class="aui-margin-b-5">{{item.Name}}</label>
                        <i v-if="index<(headerlist.length-1)" class="icon iconfont icon-xiangyoujiantou"></i>
                    </label>
                    <div class="cl"></div>
                </div>
            </div>
            <!-- 列表 -->
            <div class="noinfo" id="noorder" v-if="list.length<=0" style="padding-top: 50%;">
                <img src="../image/index/noinfomsg_icon.png" alt="" />
                <h5><br />暂无相关数据</h5>
            </div>
            <div v-if="list.length>0" class="organization_list_li_icon pt5 " :style="{'padding-top':topHeader+'px'}" style="padding-bottom: 80px;">
                <div>
                    <div v-for="(item,index) in list" class="boxarea mainbox" v-on:click="doChoosUser(item)"
                        v-bind:class="{'border-bottomLine':index<list.length-1}">
                        <div v-if="!item.IsMan" v-on:click="do_open(item,2)" class="department_cont"
                            style="padding: 0;">
                            <div class="organization_list_li_name" style="display: flex; align-items: center;">
                                <label class="">{{item.Name}}</label>
                            </div>
                            <div class="organization_list_li_icon">
                                <span v-if="item.Count!=undefined" class="ccc"
                                    style="vertical-align: text-top;">{{item.Count}}</span>
                                <i class="icon iconfont icon-xiangyoujiantou aui-margin-l-5 ccc fr"></i>
                            </div>
                        </div>
                        <div v-if="item.IsMan" class="department_cont" style="padding: 0;">
                            <div class="organization_list_li_name" style="display: flex; align-items: center;">
                                <van-image v-if="item.HeadImg" round fit="cover" width="30" height="30"
                                    :src="item.HeadImg"></van-image>
                                <div v-if="!item.HeadImg" class="yuan-bule yuan-qblue">
                                    <label class="aui-font-size-16" style="text-align: center;">
                                        <label v-if="item.FinalRealName" v-text="onReturnOne(item.FinalRealName)"
                                            style="color: #fff;"></label>
                                        <label v-if="!item.FinalRealName" style="color: #fff;">空</label>
                                    </label>
                                </div>
                                <div class="aui-margin-l-15"
                                    style="width: calc(100% - 60px);">
                                    <div>{{item.FinalRealName}}</div>
                                    <div v-if="item.PosionName" class="ccc "><label class="aui-font-size-12">{{item.PosionName}}</label></div>
                                </div>
                                   
                            </div>
                            <div class="organization_list_li_icon">
                                <input v-if="IsMultiple" type="checkbox" class="aui-checkbox  new-right-list"
                                    v-bind:checked="item.isselected">
                                <input v-if="!IsMultiple" type="radio" name="radioRight"
                                    class="aui-radio  new-right-list" v-bind:checked="item.isselected">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!--底部弹出-->
        <div v-if="showchoose" class="choose-list">
            <div class="choose-header">
                已选：{{chooseList.length}} 人
                <label class="header-close">
                    <i v-on:click="showChooseAll()" class="icon iconfont icon-shoulishibaiicon fr"></i>
                </label>
            </div>

            <div v-if="chooseList.length>0" class="aui-content aui-margin-b-15 pt50">
                <ul class="aui-list aui-media-list">
                    <li v-for="(item,index) in chooseList" class="aui-list-item" v-bind:class="{'border-bottomLine':index<chooseList.length-1}">
                        <div class="aui-media-list-item-inner ptb">
                            <div class="aui-list-item-media " style="width: 3.5rem;">
                                <div class="photo-content">
                                    <div v-if="item.HeadImg">
                                        <img class="photo-bg" :src="item.headImg" alt="">
                                    </div>
                                    <div v-if="!item.HeadImg" class="yuan-bule yuan-qblue" style="height: 50px;width: 50px;line-height: 50px;">
                                        <label style="text-align: center;">
                                            <label v-if="item.FinalRealName" v-text="onReturnOne(item.FinalRealName)" style="color: #fff;font-size: 1rem; margin-top: 12px;"></label>
                                            <label v-if="!item.FinalRealName" style="color: #fff;font-size: 1rem; margin-top: 12px;">空</label>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-text">
                                    <div class="aui-list-item-title">
                                        {{item.FinalRealName}}
                                    </div>
                                    <div v-on:click="doChoosUser(item)" class="aui-list-item-right">
                                        <label class="btn-del-show text-blue"> <i class="icon iconfont icon-shanchu "></i> 移除</label>
                                    </div>
                                </div>
                                <div class="aui-list-item-text">
                                    {{item.PosionName==''?'无':item.PosionName}}
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!--底部按钮-->
        <div v-if="IsMultiple" class="aui_bottom">
            <div v-on:click="showChooseAll()" class="left-btn">
                已选：{{chooseList.length}} 人
                <i v-if="showchoose" class="icon iconfont icon-shangjiantou"></i>
                <i v-if="!showchoose" class="icon iconfont icon-down"></i>
            </div>
            <div v-if="IsChoose" v-on:click="doChooseMore()" class="right-btn">确定</div>
            <div v-if="!IsChoose" v-on:click="do_save()" class="right-btn">{{PublishType==2?'重派':'派单'}}</div>
        </div>

        <div v-if="!IsMultiple" class="aui_bottom">
            <div v-if="IsChoose" class="aui_bottombtn" v-on:click="doChooseOne()">确定</div>
            <div v-if="!IsChoose" class="aui_bottombtn" v-on:click="do_save_one()">确定</div>
        </div>
    </div>
</body>
<script type="text/javascript " src="../script/api.js "></script>
<script type="text/javascript " src="../script/vue.js "></script>
<script type="text/javascript" src="../script/config.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/mui/mui.min.js"></script>
<script type="text/javascript" src="../script/mui/mui.picker.min.js"></script>
<script type="text/javascript" src="../script/mui/mui.poppicker.js"></script>
<script type="text/javascript" src="../script/aui-toast.js"></script>
<script type="text/javascript " src="../script/vant/vue.js"></script>
<script type="text/javascript " src="../script/vant/vant.js"></script>
<script type="text/javascript" src="js/repairchooseuser.js"></script>

</html>